<template>
  <div class="view-wrapper">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="" prop="name">
            <el-input v-model="queryParams.name" placeholder="队伍名称、分组" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="活动时间：">
          <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
          <el-form-item label="比赛状态："  prop="status">
            <el-select v-model="queryParams.status" placeholder="全部" size="small">
              <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
     
      <div class="listBox">
        <div style="margin-bottom: 14px" class="topBtn">
          <div>
            <el-button type="primary" @click="handleAdd">新增比赛</el-button>
          </div>
          <div style="margin-left: 14px">
            <export-excel-button
              title="赛事信息列表"
              action="/guess/activity/support/export"
              :params="ExportParams"
            />
          </div>
          <div>
            <el-upload  style="margin-left: 14px" class="upload-demo" :action="fileaction" :headers="headers" :data="fileData" :limit="1"
              :on-success="handleFileChange" :show-file-list="true" :file-list="fileList">
              <el-button type="primary" >导入比赛</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="比赛时间" align="center" prop="time" :show-overflow-tooltip="true" />
          <el-table-column label="比赛分组" align="center" prop="groups" :show-overflow-tooltip="true" />
          <el-table-column label="1队名称" align="center" prop="oneName" :show-overflow-tooltip="true" />
          <el-table-column label="2队名称" align="center" prop="twoName" :show-overflow-tooltip="true" />
          <el-table-column label="队1头像" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div class="imgBox">
                <img :src="scope.row.oneIcon" alt="" v-if="scope.row.oneIcon != '-'">
                <span v-else>--</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="队2头像" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div class="imgBox">
                <img :src="scope.row.twoIcon" alt="" v-if="scope.row.twoIcon != '-'">
                <span v-else>--</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="1队得分" align="center" prop="oneScore" :show-overflow-tooltip="true" />
          <el-table-column label="2队得分" align="center" prop="twoScore" :show-overflow-tooltip="true" />
          <el-table-column label="1队赔率" align="center" prop="oneOdds" :show-overflow-tooltip="true" />
          <el-table-column label="2队赔率" align="center" prop="twoOdds" :show-overflow-tooltip="true" />
          <el-table-column label="平局赔率" align="center" prop="dogfallOdds" :show-overflow-tooltip="true" />
          <el-table-column label="下注截止时间" align="center" prop="deadline" :show-overflow-tooltip="true" />
          <el-table-column label="比赛结果" align="center" prop="eventsResult" :show-overflow-tooltip="true" />
          <el-table-column label="1队积分" align="center" prop="oneAmount" :show-overflow-tooltip="true" />
          <el-table-column label="2队积分" align="center" prop="twoAmount" :show-overflow-tooltip="true" />
          <el-table-column label="平局积分" align="center" prop="dogfallAmount" :show-overflow-tooltip="true" />
          <el-table-column label="总积分" align="center" prop="totalAmount" :show-overflow-tooltip="true" />
          <el-table-column label="预计发放积分" align="center" prop="issueAmount" :show-overflow-tooltip="true" />
          <el-table-column label="平台盈亏" align="center" prop="platfromAmount" :show-overflow-tooltip="true">
             <template slot-scope="scope">
              <span v-if="scope.row.platfromAmount <= 0">{{scope.row.platfromAmount}}</span>
              <span v-if="scope.row.platfromAmount > 0">+{{scope.row.platfromAmount}}</span>
            </template>
          </el-table-column>
          <el-table-column label="比赛状态" align="center" prop="status" :show-overflow-tooltip="true" :formatter="statusatter"/>
          <el-table-column label="前端是否显示" align="center" prop="isShow" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.isShow == 1">不显示</span>
              <span v-if="scope.row.isShow == 2">显示</span>
            </template>
          </el-table-column>
          <el-table-column label="虚拟参与人数" align="center" prop="virtualCount" :show-overflow-tooltip="true" />
          <el-table-column label="虚拟累积奖池" align="center" prop="virtualAmount" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="scope.row.status != 4">
                编辑  </el-button>
              <el-button size="mini" type="text" @click="handleasof(scope.row)" v-if="scope.row.status == 1">
                截止下注</el-button> 
              <el-button size="mini" type="text" @click="handleBet(scope.row)"  v-if="scope.row.status == 2">
                恢复下注</el-button> 
              <el-button size="mini" type="text" @click="endScore(scope.row)" v-if="scope.row.status == 2">
                比赛结束</el-button> 
              <el-button size="mini" type="text" @click="editScore(scope.row)" v-if="scope.row.status == 3">
                修改比分</el-button>  
              <el-button size="mini" type="text" @click="handleReward(scope.row)" v-if="scope.row.status == 3">
                发放奖励</el-button>
              <el-button size="mini" type="text" @click="handleShow(scope.row)"  v-if="scope.row.isShow == 2">
                前端隐藏</el-button>
              <el-button size="mini" type="text" @click="handleShow(scope.row)"  v-if="scope.row.isShow == 1">
                前端显示</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-if="scope.row.dogfallAmount == 0 && scope.row.oneAmount == 0 && scope.row.twoAmount == 0 && scope.row.status == 1">
                 删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />

    </div>
    <add-game
      ref="childRef"
      v-if="addGame"
      :id="id"
      :guessActivityId="queryParams.guessActivityId"
      :pathType="pathType"
      :visible.sync="addGame"
      @success="_handleSuccess" 
    />
    <add-score
      ref="childRef"
      v-if="addScore"
      :id="id"
      :scoreStatus="scoreStatus"
      :visible.sync="addScore"
      @success="_handleSuccess" 
    /> 
    <add-bet
      ref="childRef"
      v-if="addBet"
      :id="id"
      :pathType="pathType"
      :visible.sync="addBet"
      @success="_handleSuccess" 
    />
  </div>
  
</template>

<script>
  import {
    adminDict,
    supportList,
    stopDeadline,
    supportAmount,
    deleteSupport,
    supportShow
  } from "@/api/blindBox/quizConfigOne";
  import addGame from './components/addGame' 
  import addScore from './components/addScore' 
  import addBet from './components/addBet' 
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import { getToken } from "@/utils/auth";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
      addGame,
      addScore,
      addBet
    },
    data() {
      return {
        id: '',
        addGame: false,
        pathType: 'add',
        scoreStatus: '',
        addScore: false, 
        addBet: false,
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          guessActivityId: '',//	竞猜活动id
          startTime: '', //比赛开始时间
          endTime: '',//	比赛结束时间
          status:'',//比赛状态 1进行中 2待揭晓 3已结束 4奖励已发放
          name: '',//队伍名称、分组
        },
        date: [],
        statusList:[
          {id: '',value: '全部',},
          {id: '1',value: '进行中',},
          {id: '2',value: '待揭晓',},
          {id: '3',value: '已结束',},
          {id: '4',value: '奖励已发放',},
        ],
        //导入需要的参数
        fileData: {
            guessActivityId: '',
        },
        fileList: [],
        fileaction: process.env.VUE_APP_BASE_API + "/guess/activity/support/import",
        headers: {
          "X-Access-Token": getToken(),
        }, //设置上传文件请求头
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.queryParams.guessActivityId = this.$route.query.guessActivityId
      this.fileData.guessActivityId = this.$route.query.guessActivityId
      this.getList();
    },
    methods: {
      /** 查询会员列表列表 */
      getList() {
        this.loading = true;
        if (this.date) {
          this.queryParams.startTime = this.date[0]
          this.queryParams.endTime = this.date[1]
        }
        var data = {
          ...this.queryParams
        }
        supportList(this.queryParams).then(response => {
          this.total = response.result.total
          this.customerList = response.result.records
          this.customerList = this.customerList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '-'
              }
            })
            return item
          })
          console.log('this.customerList', this.customerList)
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      /** 详情按钮操作 */
      handleView(row,type) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/Prepaid-details",
          query: {
            id: row.id,
            type: type
          },
        })
      },
      //推荐用户列表
      handleRecommended(row) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/recommended-list",
          query: {
            id: row.id,
          },
        })
      },
       //coin详情
       handleCoin(row) {
        this.$router.push({
          path: "/members/coin-detail",
          query: {
            id: row.id,
          },
        })
      },
      //新增比赛
      handleAdd(){
        this.addGame = true
        this.pathType = 'add'
      },
       //新增活动
      handleEdit(row){
        this.addGame = true
        this.pathType = 'edit'
        this.id = row.id
      },
      //修改比分
      editScore(row){
        this.addScore = true
        this.scoreStatus = 'editScore'
        this.id = row.id
      },
      //结束比赛
      endScore(row){
        this.addScore = true
        this.scoreStatus = 'endScore'
        this.id = row.id
      },
      //截止下注
      handleasof(row){
        this.$confirm('是否确定截止下注', '截止下注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          stopDeadline(row.id).then(res => {
             this.$message.success('操作成功');
             this.getList();
          })
        }).catch(() => {});
      },
      //发放奖励
      handleReward(row){
        this.$confirm(`是否确认发放${row.issueAmount}CoCo奖励发放后无法撤回，请谨慎操作`, '发放奖励', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          supportAmount(row.id).then(res => {
            this.$message.success('发放成功');
            this.getList();
          })
        }).catch(() => {});
      },
      //恢复下注
      handleBet(row){
        this.addBet = true
        this.id = row.id
      },
      //删除
      handleDelete(row){
        this.$confirm(`是否删除，请谨慎操作`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSupport(row.id).then(res => {
            this.$message.success('操作成功');
            this.getList();
          })
        }).catch(() => {});
      },
      //显示/隐藏
      handleShow(row){
        console.log('row',row)
        if(row.isShow == 1){
          var title = '是否前端显示'
          var isShow = 2
        }else if(row.isShow == 2){
          var title = '是否前端隐藏'
          var isShow = 1
        }
        
        this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var data = {
              id: row.id,
              isShow: isShow
            }
            supportShow(data).then(res => {
              this.$message.success('操作成功')
              this.getList()
            })
          }).catch(() => {});
      },
      _handleSuccess(data) {
        console.log("data", data);
        this.queryParams.pageNum = 1
        this.getList();
      },
      //导入文件
      handleFileChange(res, file) {
        console.log('文件', res, file)
        if (res.code == 200) {
          this.$message.success('导入成功');
          this.getList();
        } else {
          this.$message.error(res.message);
          
        }
      },
      statusatter(row){
        if(row.status == 1){
          return '进行中'
        }else if(row.status == 2){
          return '待揭晓'
        }else if(row.status == 3){
          return '已结束'
        }else if(row.status == 4){
          return '奖励已发放'
        }else{
          return '-'
        }
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .topBtn{
    display: flex;
    justify-content: flex-start;
  }
  .imgBox{
    img{
      width: 60px;
      height: 60px;
    }
  }
</style>
